<script setup>
import { reactive, ref } from 'vue'
import STextHead from "./../s-components/s-text-head/s-text-head.vue"
import SDropdownInput from "./../s-components/s-dropdown-input/s-dropdown-input.vue";
import SCard from "./../s-components/s-card/s-card.vue";
import SParagraph from "./../s-components/s-paragraph/s-paragraph.vue";
import SIcon from "./../s-components/s-icon/s-icon.vue";
import SInput from "./../s-components/s-input/s-input.vue";
import {fontlist} from "./../styles/font.info.js"
// import SInput1 from './../s-components/s-input/s-input.vue';
defineProps({
  msg: String
})

let dropdownDataSource = reactive(['111','111','111']);
let iconList = reactive(fontlist);

const getValue = v => {
  console.log('--->',v);
}

</script>

<template>
  <STextHead>Start页面</STextHead>
  <SParagraph>
    CocoaBean EchartFactory是用于开发个人的组件，及Echart视图工具。
  </SParagraph>
  <SParagraph>
    S-Component 是用于自己使用的组件库，方便日常的使用。目前还未涉及样式编辑。
  </SParagraph>
    <STextHead :style="'font-size: 20px'">ICON</STextHead>
  <div class="icon-box">
    <span  v-for="item in iconList.slice(0,10)" :key="item" class="icon-item-box">
      <SIcon :iconName="item"></SIcon>
      <p class="icon-name">{{item}}</p>
    </span>
  </div>
  <STextHead
    :style="'fontSize: 20px'"
  >
    Input
  </STextHead>
  <div>
    <SInput type="search" @submit="getValue(value)"></SInput>
    <SInput type="search" :circle="true" @submit="getValue"></SInput>
  </div>
  <STextHead
    :style="'fontSize: 20px'"
  >导航</STextHead>

  <h1>{{ msg }}</h1>
  <div>
    <h3>卡片</h3>
    <div>
      <SCard type="common">
        <div>这是一个卡片</div>
      </SCard>
      <SCard type="color">
        <div>这是另一个卡片</div>
      </SCard>
    </div>
    <h3>输入下拉框</h3>
    <div>
      <SDropdownInput :dropdownDataSource='dropdownDataSource'></SDropdownInput>
    </div>
  </div>

</template>

<style scoped>
a {
  color: #42b983;
}
.icon-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.icon-item-box:hover {
  margin-top: calc(.5em - 5px);
  box-shadow:  0 0 5px 0 #ddd;
}

.icon-item-box {
  margin: .5em;
  padding: .5em;
  display: inline-block;
  text-align: center;
  width: 70px;
  height: 70px;
  border: 1px solid #629f7f;
  border-radius: 3px;
  transition: .2s all ease-in-out;
}

.icon-name {
  font-size:10px;
  color:#629f7f;
}
</style>
